<template>
  <teleport to="#message">
    <div
      class="alert message-info fixed-top w-50 mx-auto d-flex justify-content-between mt-2"
      :class="classObject"
      v-if="isVisible"
    >
      <span>{{ message }}</span>
      <button
        type="button"
        class="btn-close"
        aria-label="Close"
        @click.prevent="hide"
      ></button>
    </div>
  </teleport>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue'
import useDOMCreate from '../hooks/useDOMCreate'
export type MessageType = 'success' | 'error' | 'default'
export default defineComponent({
  props: {
    message: String,
    type: {
      type: String as PropType<MessageType>,
      default: 'default'
    }
  },
  emits: ['close-message'],
  setup(props, context) {
    // 使用 useDOMCreate 来代替下面这段重复的逻辑
    useDOMCreate('message')
    // 重用 Loader.vue 中的创建节点来使用 teleport
    // const node = document.createElement('div')
    // node.id = 'message'
    // document.body.appendChild(node)
    // 设置状态信息:isVisible控制是否显示，classObject控制显示样式
    const isVisible = ref(true)
    const classObject = {
      'alert-success': props.type === 'success',
      'alert-danger': props.type === 'error',
      'alert-primary': props.type === 'default'
    }
    // 创建一个方法：点击 isVisible 设置为 false，让他消失
    const hide = () => {
      isVisible.value = false
      // 点击的时候发送一下
      context.emit('close-message', true)
    }
    return {
      isVisible,
      classObject,
      hide
    }
  }
})
</script>

<style>
</style>
